<!--
/**
 * YfDrag component
 *
 * @description Use of vue-drag-resize
 * @license YetiForce Public License 6.5
 * @author Tomasz Poradzewski <t.poradzewski@yetiforce.com>
 */
-->
<template>
	<vue-drag-resize
		v-if="active"
		:key="active"
		ref="drag"
		:isResizable="false"
		isDraggable
		:dragHandle="dragHandleClass"
		:x="coordinates.left"
		:y="coordinates.top"
		:w="width"
		:h="height"
		@dragging="drag"
		@dragstop="correctCoordinates"
	>
		<slot></slot>
	</vue-drag-resize>
	<div v-else :key="active">
		<slot></slot>
	</div>
</template>
<script>
import VueDragResize from '~/node_modules/vue-drag-resize/src/components/vue-drag-resize.vue'
import { keepElementInWindow } from '~/mixins/DragResize'
export default {
	name: 'YfDrag',
	mixins: [keepElementInWindow],
	components: { VueDragResize },
	props: {
		active: {
			type: Boolean,
			required: false,
			default: true,
		},
		coordinates: {
			type: Object,
			required: true,
		},
		width: {
			type: Number,
			default: 45,
		},
		height: {
			type: Number,
			default: 42,
		},
		dragHandleClass: {
			type: String,
			required: false,
		},
	},
	methods: {
		drag(newRect, e) {
			this.$emit('update:coordinates', {
				top: newRect.top,
				left: newRect.left,
			})
		},
		correctCoordinates(rect) {
			let computedRect = Object.assign({}, rect)
			if (rect.left + this.width - this.width < 0) {
				computedRect.left = this.width - this.width
			} else if (this.width + rect.left > window.innerWidth) {
				computedRect.left = window.innerWidth - this.width
			}
			if (rect.top < 0) {
				computedRect.top = 0
			} else if (rect.top > window.innerHeight - this.height) {
				computedRect.top = window.innerHeight - this.height
			}
			this.$emit('update:coordinates', computedRect)
			this.$emit('dragstop', true)
		},
	},
}
</script>

<style></style>
